<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
</head>
<style type="text/css">
	.main_div{
		margin : 15px;
	}
</style>

<body>

<form class="layui-form layui-form-pane" action="" id="form_add">
  <div class="layui-form-item">
    <label class="layui-form-label">客户姓名</label>
    <div class="layui-input-block">
    <!--lay-verify="required" 这个语句是自带的正则表达式，包含的意思是 该文本框不能为空(必填项) -->
      <input lay-verify="required" type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入客户姓名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input lay-verify="required" type="text" name="gender" lay-verify="required"  placeholder="请输入性别" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">办公电话</label>
    <div class="layui-input-block">
      <input lay-verify="required" type="text" name="officePhone" lay-verify="required"  placeholder="请输入办公电话" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-block">
      <input lay-verify="required" type="text" name="phone" lay-verify="required"  placeholder="请输入手机号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!--提交按钮开始 -->
  <div class="layui-form-item">
    <input class="layui-btn" onclick="submitForm()" lay-filter="demo2" value="添加" />
  </div>
</form>
  <!--提交按钮结束 -->
          
<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/static/common/mylayer.js"></script>
<script src="${ctx}/static/common/util.js"></script>
<script src="${ctx}/static/lib/layui/layui.js"></script>
<script src="${ctx}/static/lib/kindeditor/kindeditor.js"></script>
<script src="${ctx}/static/lib/kindeditor/lang/zh_CN.js"></script>
<!--layer弹窗测试  -->
<script>
	layui.use(['layer','upload'],function() {
		var layer = layui.layer;
		var upload = layui.upload;
	});
	
	//图片上传
	  //普通图片上传
		  var uploadInst = upload.render({
		    elem: '#uploadBtn'
		    ,url: '${ctx}/upload/uploadImg.action'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#image').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(resp){
		      //如果上传失败
		      if(resp.code == util.SUCCESS){
		    	  $("#image").val(resp.data);
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		
	function submitForm() {
		//ajax方式提交表单
		$.ajax({
			url:"${ctx}/customer/insert.action",
			//data提交，序列化
			data:$('#form_add').serialize(),
			type:"POST",
			dataType:"json",
			success :function (resp) {
				if (resp.code == util.SUCCESS) {
					mylayer.confirm("添加成功，是否跳转到列表界面？","${ctx}/customer/getPage.action");
				}else{
					mylayer.errorMsg(resp.msg);					
				}
			}
		}); 
	}
</script>
</body>
</html>